import React, { useMemo } from 'react'
import style from './Index.module.less'
import { strToNum } from '@src/assets/js/tool'

function formatMoney (n) {
  console.log(n)
  if (n < 10000) {
    return Number(n).toFixed(2)
  }
  n = n / 10000
  if (n < 10000) {
    return Number(n).toFixed(2) + '万'
  }
  n = n / 10000
  return Number(n).toFixed(2) + '亿'
}

function Main ({ data }) {
  const list = useMemo(() => {
    if (data && data.top_dispute_amount instanceof Array) {
      return data.top_dispute_amount.slice(0, 5)
    }
    return []
  }, [data])
  return (
    <div className={style.container}>
      <div className={style.header}>仲裁案件标的排行</div>
      <div className={style.body}>
        <div className={style.title}>
          <div className={style.one}>排名</div>
          <div className={style.two}>名称</div>
          <div className={style.three}>标的</div>
        </div>
        {
          list.map((li, i) => {
            return (
              <div className={style.item} key={i}>
                <div className={style.one}>{i + 1}</div>
                <div className={style.two}>
                  <div className={style['two-inner']}>{li.name}</div>
                </div>
                <div className={style.three}>{formatMoney(strToNum(li.dispute_amount))}</div>
              </div>
            )
          })
        }
      </div>
    </div>
  )
}

export default Main
